<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html id="idHtml">
<script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// 基于准备好的dom，初始化echarts实例
	    var myChartOrder = echarts.init(document.getElementById('mainOrder'));
			// 指定图表的配置项和数据
		     optionOrder = {
		    		title: {
						text: "订单一览",
						left:'2%',
						textStyle:{
							//文字颜色
					        //color:'#ccc',
							//字体风格,'normal','italic','oblique'
							//fontStyle:'italic',
							//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
							fontWeight:'normal',
							//字体系列
					        fontFamily:'lucida grande',
							//字体大小
							fontSize:12
						}
					},
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data:['平台订单','荷兰订单','总订单','完成','未完成'],
		        right:'3%'
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        { 
		          type : 'category',
		          data : [<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.qualityDate}'</c:forEach>]	
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'平台订单',
		            type:'bar',
		           
		            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.platformQuantity}'</c:forEach>],
		           
		            itemStyle:{
		                normal:{
		                    color: "#FF8C00" //图标颜色
		                }
		            }
		        },      
		        {
		            name:'荷兰订单',
		            type:'bar',
		            
		            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.hollandQuantity}'</c:forEach>],
		            
		            itemStyle:{
		                normal:{
		                    color: "#8B4513" //图标颜色
		                }
		            }
		        },
		        {
		            name:'总订单',
		            type:'bar',
		           
		            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.totalQuantity}'</c:forEach>],
		           
		            
		            /* markLine : {
		                lineStyle: {
		                    normal: {
		                        type: 'dashed'
		                    }
		                },
		                data : [
		                    [{type : 'min'}, {type : 'max'}]
		                ]
		            }, */
		        itemStyle:{
		            normal:{
		                color: "black" //图标颜色
		            }
		        }
		        },
		        
		        {
		            name:'完成',
		            type:'bar',
		            barWidth : '5%',
		            stack: '总订单',
		            
		            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.completedQuantity}'</c:forEach>],	
		           
		            
		            itemStyle:{
		                normal:{
		                    color: "green" //图标颜色
		                }
		            }
		        },
		        {
		            name:'未完成',
		            type:'bar',
		            barWidth : '5%',
		            stack: '总订单',
		            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.notCompletedQuantity}'</c:forEach>],
		            itemStyle:{
		                normal:{
		                    color: "#CD5C5C" //图标颜色
		                }
		            }
		        },
		    ]
		};
		
	    
	 // 使用刚指定的配置项和数据显示图表。
	    myChartOrder.setOption(optionOrder);
	});
	<!-- flag等于0 订单状况，flag等于1 质检状况 -->
	function searchQuantity(flag) {
		var endDate;
		var beginDate;
		if (flag == "0") {
			endDate = $("#endDate").val();
			beginDate = $("#beginDate").val();
		} else if (flag == "1") {
			endDate = $("#endDateTemp").val();
			beginDate = $("#beginDateTemp").val();
		}
		if (endDate == "" || beginDate == "") {
			tipParent("请选择日期");
			return;
		}else {
			if (beginDate>endDate) {
				tipParent("开始日期不能大于结束日期");
				return;
			}
			var endDateItem = new Date(endDate.replace(/-/g, "/"));
			var beginDateItem = new Date(beginDate.replace(/-/g, "/"));
			var days = endDateItem.getTime() - beginDateItem.getTime();
			var day = parseInt(days / (1000 * 60 * 60 * 24)); 
			if (day > 30) {
				tipParent("日期跨度不得超过30天");
				return;
			}
		}
		var urlOrder = "${ctx}/getOrderQuantity";
		var urlQuality = "${ctx}/getQuantityInspection";
		var params = {"endDate":endDate,
					 "beginDate":beginDate};
		$.post(urlOrder,params,function(result){
				$("#scriptHtml").html($(callBackHtml(result)).find("#scriptHtml").html());
				scriptBack();
		},'html');
		$.post(urlQuality,params,function(result){
				$("#scriptHtmlTemp").html($(callBackHtml(result)).find("#scriptHtmlTemp").html());
				scriptBackTemp();
		},'html')
	}


</script>
<body>
<div style="width: 100%;height: 100%;">
<div class="searchInp clearfix headerButton" style="margin-top: 10px;float: left;margin-left: 15px;">
	<div class="timeBox">
		<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
			id="beginDate" name="beginDate" style="width: 110px"  value="<fmt:formatDate value='${beginDate }' pattern='yyyy-MM-dd'/>">
		<p class="list">~</p>
		<input type="text" class="laydate-icon" id="endDate" name="endDate"
			style="width: 110px" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})" value="<fmt:formatDate value='${endDate }' pattern='yyyy-MM-dd'/>">
			<button type="button" style="position: relative;top:2px;left: 5px;" onclick="searchQuantity(0)">检索</button>
			<button type="button" style="width:50px; position: relative;top:2px;left: 5px;" onclick="jumpQuatity()">质检</button>
	</div>
</div>
<div class="clearfix" style="height: 300px;top: 50px;">
<div id="mainOrder" style="height: 300px;margin-top: 50px;">
</div>
</div>
</div>
<div id = "scriptHtml">
<script type="text/javascript">
function scriptBack(){
//基于准备好的dom，初始化echarts实例
var myChartOrder = echarts.init(document.getElementById('mainOrder'));
	// 指定图表的配置项和数据
     var optionOrder = {
    		title: {
    			text: "订单一览",
				left:'2%',
				textStyle:{
					//文字颜色
			        //color:'#ccc',
					//字体风格,'normal','italic','oblique'
					//fontStyle:'italic',
					//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
					fontWeight:'normal',
					//字体系列
			        fontFamily:'lucida grande',
					//字体大小
					fontSize:12
				}
			},
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['平台订单','荷兰订单','总订单','完成','未完成'],
        right:'3%'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        { 
          type : 'category',
          data : [<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.qualityDate}'</c:forEach>]	
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'平台订单',
            type:'bar',
           
            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.platformQuantity}'</c:forEach>],
           
            itemStyle:{
                normal:{
                    color: "#FF8C00" //图标颜色
                }
            }
        },      
        {
            name:'荷兰订单',
            type:'bar',
            
            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.hollandQuantity}'</c:forEach>],
            
            itemStyle:{
                normal:{
                    color: "#8B4513" //图标颜色
                }
            }
        },
        {
            name:'总订单',
            type:'bar',
           
            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.totalQuantity}'</c:forEach>],
           
            
            /* markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }, */
        itemStyle:{
            normal:{
                color: "black" //图标颜色
            }
        }
        },
        
        {
            name:'完成',
            type:'bar',
            barWidth : '5%',
            stack: '总订单',
            
            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.completedQuantity}'</c:forEach>],	
           
            
            itemStyle:{
                normal:{
                    color: "green" //图标颜色
                }
            }
        },
        {
            name:'未完成',
            type:'bar',
            barWidth : '5%',
            stack: '总订单',
            	data:[<c:forEach items='${orderQualityList}' var='temp' varStatus='status'><c:if test="${status.index != 0}">,</c:if>'${temp.notCompletedQuantity}'</c:forEach>],
            itemStyle:{
                normal:{
                    color: "#CD5C5C" //图标颜色
                }
            }
        },
    ]
};
     myChartOrder.setOption(optionOrder);
}
</script>
</div>
</body>
</html>